<template>
  <!-- 顶部块 -->
  <div class="hea-div"></div>
  <!-- 顶部 -->
  <header>
    <img src="../../../public/images/logo-red.png" alt="" />
    <button class="outLogin" @click="goLogin">退出</button>
  </header>
  <main class="home-main">
    <!-- 侧边栏 -->
    <Sidebar />
    <router-view />
  </main>
</template>

<script setup>
import Sidebar from "../../components/Sidebar";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
// 退出登录
function goLogin() {
  router.push({
    name: "MyLogin",
  });
}
</script>

<style>
/* 代替顶部 */
.hea-div {
  width: 100%;
  height: 50px;
}
/* 导航栏 */
header {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgb(54, 61, 64);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 99;
}
header img {
  width: 300px;
  height: 50px;
  margin-left: 20px;
}
/* 退出 */
.outLogin {
  width: 50px;
  height: 30px;
  margin-right: 20px;
}
/* 主要部分 */
.home-main {
  width: auto;
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  box-sizing: border-box;
}
</style>
